<template>
	<view>
		<view class="login-img">
			<view class="owl-login" :class="hideEyes?'password':''">
				<view class="hand"></view>
				<view class="hand hand-r"></view>
				<view class="arms">
					<view class="arm"></view>
					<view class="arm arm-r"></view>
				</view>
			</view>
		</view>
		<view class="login-form">
			<form @submit="formSubmit">
				<view class="form-input">
					<input type="text" name="text" value="" placeholder="邮箱号码" />
				</view>
				<view class="form-input">
					<input name="password" type="password" value="" placeholder="密码" @focus="passwordF_B" @blur="passwordF_B" />
				</view>
				
				<button type="primary" form-type="submit">登录</button>
			</form>
			<lausirCodeDialog :show="showCodeDialog" :len="5" :autoCountdown="true" :phone="phone" v-on:change="change"></lausirCodeDialog>
			</view>
		</view>
	</view>
</template>

<script>
	  import lausirCodeDialog from '../../components/lausir-codedialog/lausir-codedialog.vue';
	export default {
		components: {
			lausirCodeDialog,
		},
		data() {
			return {
				hideEyes: false,
				showCodeDialog: false,
				phone:"",
				num:0,
				ph:""
			}
		},
		mounted() {
			 const value = uni.getStorageSync('storage_key');
			 if(value==true){
				 uni.navigateTo({
				 	url:"../index/index"
				 })
			 }else{
				 
			 }
		},
		methods: {
			change:function(res){
			
				if(res.type == 1){
					// this.code = res.code;
					if(res.code==this.num){
						this.showCodeDialog = false;
						uni.showToast({
							title: "登陆成功",
							duration: 2000
						});
						
						uni.navigateTo({
							url:"../index/index"
						})
					  uni.setStorageSync('storage_key', "true");
					}else{
						// console.log("验证码错误")
						uni.showToast({
							title: "验证码错误",
							duration: 2000
						});
					}
					
					
				}else if(res.type == -1){
					// this.code ="请输入验证码";
					this.showCodeDialog = false;
				}else{
					setTimeout(function(){
						res.resendCall()
					},3000)
				}
				
				
			},
			
			
			passwordF_B() {
				this.hideEyes = !this.hideEyes;
			},
			formSubmit(e) {
				this.ph=e.detail.value.text
				var RegEmail = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
				
				if(e.detail.value.text==""||e.detail.value.password==""){
					uni.showToast({
						title: '账号或密码不能为空',
						duration: 2000
					});
					return false
				}
				console.log(e.detail.value);
				if(RegEmail.test(e.detail.value.text)){
						}else{	
							uni.showToast({
								title: '邮箱格式不正确',
								duration: 2000
							});
							return false
						}
						this. num= Math.floor(Math.random() * 10000 + 9999)
						console.log(this. num)
						uni.request({
							url:`http://101.34.54.81/phpmailer/test.php?phone=${e.detail.value.text}&mun=${this. num}`,
							
							success(RES) {
								console.log(RES)
								uni.showToast({
									title: RES.data,
									duration: 2000
								});
							},
							fail(bb) {
								console.log(bb)
								uni.showToast({
									title: "发送失败",
									duration: 2000
								});
							}
						})
				
						 var email = e.detail.value.text
						var mphone = email.substr(0, 3) + '****' + email.substr(7);
			           this.phone=mphone
				this.showCodeDialog = true;
			}
		}
	}
</script>

<style>
	.login-form {
		margin: -9px 10px 0 10px;
		/* height: 200px; */
		background: #007AFF;
		border-radius: 10px;
		overflow: auto;
		background-color: #EEEEEE;
		box-shadow: 0 2px 10px #9B9B9B;
		padding: 20px;
	}

	.form-input input {
		background: #ffffff;
		border-radius: 5px;
		height: 40px;
		margin: 20px 0;
		padding: 0 10px;
	}

	.login-img {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 108px;
		margin-top: 100rpx;
	}

	.owl-login {
		width: 211px;
		height: 108px;
		background-image: url('');
		background-repeat: no-repeat;
		background-size: 100%;
		position: absolute;
	}

	.owl-login .hand {
		width: 34px;
		height: 34px;
		-webkit-border-radius: 40px;
		border-radius: 40px;
		background-color: #472d20;
		transform: scaleY(0.6);
		transition: 0.3s ease-out;
		position: absolute;
		left: 14px;
		bottom: -8px;
	}

	.owl-login .hand.hand-r {
		left: 170px;
	}

	.owl-login .arms {
		top: 58px;
		position: absolute;
		width: 100%;
		height: 41px;
		overflow: hidden;
	}

	.owl-login .arms .arm {
		width: 40px;
		height: 65px;
		position: absolute;
		left: 20px;
		top: 40px;
		background-image: url("");
		background-size: 100%;
		transition: 0.3s ease-out;
		transform: rotate(-20deg);
	}

	.owl-login .arms .arm.arm-r {
		transform: rotate(20deg) scaleX(-1);
		left: 158px;
	}

	.owl-login.password .hand {
		transform: translateX(42px) translateY(-15px) scale(0.7);
	}

	.owl-login.password .hand.hand-r {
		transform: translateX(-42px) translateY(-15px) scale(0.7);
	}

	.owl-login.password .arms .arm {
		transform: translateY(-40px) translateX(40px);
	}

	.owl-login.password .arms .arm.arm-r {
		transform: translateY(-40px) translateX(-40px) scaleX(-1);
	}
</style>
